<template>
	<view class="container">
		<view class="info-box">
			<view class="avatar">
				<image class="img" src="/static/img/my/avatar.png"></image>
			</view>
			<view class="info">
				<view class="name">
					<text>{{userInfo.name}}</text>
					<image class="sex-icon" src="/static/img/my/male.png"></image>
				</view>
				<view class="phone">
					手机号：{{userInfo.phone}}
				</view>
				<view class="more" @click="goToPage('myInfo',0)">
					查看更多
					<image class="more-icon" src="/static/img/my/right-arrow.png"></image>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="item" @click="goToPage('myRealName',0)">
				<view class="left">
					<image class="icon" src="/static/img/my/realName.png"></image>
					<text>实名认证</text>
				</view>
				<view class="right">
					<text class="danger">未认证</text>
					<image class="more-icon" src="/static/img/my/right-arrow02.png"></image>
				</view>
			</view>
			<view class="item" @click="goToPage('mySignature',0)">
				<view class="left">
					<image class="icon" src="/static/img/my/electronicSignatures.png"></image>
					<text>电子签名</text>
				</view>
				<view class="right">
					<text class="danger">未设置</text>
					<image class="more-icon" src="/static/img/my/right-arrow02.png"></image>
				</view>
			</view>
			<view class="item" @click="goToPage('personnelManagement',1)">
				<view class="left">
					<image class="icon" src="/static/img/my/employeeManagement.png"></image>
					<text>员工管理</text>
				</view>
				<view class="right">
					<text class="primary">6人</text>
					<image class="more-icon" src="/static/img/my/right-arrow02.png"></image>
				</view>
			</view>
			<view class="item" @click="goToPage('insideTransferCart',1)">
				<view class="left">
					<image class="icon" src="/static/img/my/cart.png"></image>
					<text>内转车辆</text>
				</view>
				<view class="right">
					<text class="primary">5辆</text>
					<image class="more-icon" src="/static/img/my/right-arrow02.png"></image>
				</view>
			</view>
			<view class="item" @click="goToPage('updatePwd',0)">
				<view class="left">
					<image class="icon" src="/static/img/my/updatePwd.png"></image>
					<text>修改密码</text>
				</view>
				<view class="right">
					<image class="more-icon" src="/static/img/my/right-arrow02.png"></image>
				</view>
			</view>
		</view>
		<Button3 @click="loginOut">退出登录</Button3>
		<messageTip ref="myMessage"></messageTip>
	</view>
</template>

<script setup lang="ts">
	import Button3 from '@/components/button3/button3.vue';
	import { useUserStore } from '@/stroes';
	import * as loginApi from '@/api/login/login.js'
	import { ref } from 'vue';

	const userStore = useUserStore()
	const userInfo = ref(userStore.accountInfo['user_info']);
	// console.log(userInfo);
	const myMessage = ref()
	// 获取用户相关信息
	const getUserInfo = () => {
		loginApi.getUserInfo(userStore.accountInfo['user_id']).then(res => {
			// console.log('用户信息', res);
			if (res.data && res.data.code == 0) {
				userInfo.value = res.data.data;
				userStore.userInfo = userInfo.value;
			}
		})
	}
	getUserInfo()
	// 去页面
	const goToPage = (path : String, type : Number) => {
		if (type === 1) {
			uni.navigateTo({
				url: `/pages/consumptionAdmin/${path}/${path}`
			})
		} else {
			uni.navigateTo({
				url: `/pages/${path}/${path}`
			})
		}
	}
	// 退出登录
	let isLoginOut = true;
	const loginOut = () => {
		if (isLoginOut) {
			isLoginOut = false;
			uni.showLoading({
				title: '退出中'
			})
			loginApi.loginOut().then(res => {
				uni.hideLoading()
				if (res.data && res.data.code == 0) {
					myMessage.value.open('success', '退出登录成功')

					setTimeout(() => {
						isLoginOut = true
						uni.switchTab({
							url: '/pages/login/login',
						})
					}, 1000)
				} else {
					isLoginOut = true
					console.log('退出登录失败', res);
				}

			})
		}
	}
</script>

<style scoped lang="scss">
	.container {
		padding: 176rpx 32rpx 0rpx;
		background: #F0F3F8 url('@/static/img/my/head-bg.png') no-repeat top / contain;
		// background: #F0F3F8;

		.more-icon {
			width: 24rpx;
			height: 24rpx;
		}

		.info-box {
			display: flex;
			align-items: center;

			.avatar {
				margin-right: 30rpx;
				padding: 10rpx;
				width: 164rpx;
				height: 164rpx;
				background: rgba(255, 255, 255, 0.3);
				border-radius: 50%;
				border: 2rpx solid #FFFFFF;
				overflow: hidden;
				box-sizing: border-box;
				box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(20, 79, 139, 0.1);

				.img {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}

			.name {
				font-weight: 500;
				font-size: 40rpx;
				color: #0E1624;
			}

			.more {
				color: $primary-color;
			}

			.phone {
				margin: 16rpx 0rpx;
			}

			.info {
				.sex-icon {
					margin-left: 12rpx;
					width: 30rpx;
					height: 30rpx;
				}
			}
		}

		.content {
			margin: 50rpx 0rpx 32rpx;
			border-radius: 16rpx;
			background-color: #fff;

			.item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 38rpx 32rpx 34rpx;

				.left {
					display: flex;
					align-items: center;
				}

				.danger {
					color: $danger-color;
				}

				.primary {
					color: $primary-color;
				}

				.icon {
					width: 48rpx;
					height: 48rpx;
					margin-right: 12rpx;
				}

				.more-icon {
					margin-left: 20rpx;
				}
			}
		}
	}
</style>